<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件--提示框</title>
    <script src="../echarts.min.js"></script>
</head>
<body>
    <!--为Echarts准备一个具备大小(宽高)的DOM-->
    <div id="main" style="width: 600px;height: 400px;">
    
    </div>
</body>
<script type="text/javascript">
    //基于准备好的dom初始化echarts实列
    var mychart = echarts.init(document.getElementById("main"))
    //指定图表的配置项和数据
    var option ={
        //title负责配置图表的标题
        title:{
            text:"我是主标题",
            subtext:"我是副标题",
            left:"center" //与左侧的距离
        },

        //注意提示框组件
        //提示框组件
        tooltip:{
            trigger:'axis',//出发类型:坐标触发 可选参数还有item:图形触发
            axisPointer:{ //坐标轴指示器配置项
                type:'shadow'//提示效果为阴影效果
            }
        },

        legend:{
            data:["各产品销量图"]
        },
        xAxis:{
            data:["产品A","产品B","产品C",'产品D','产品E']
        },
        yAxis:{},
        series:[{
            name:"销量",
            type:'bar',
            data:[900,700,550,1000,200]
        }]
    }
    //使用刚才的配置项与数据显示图表
    mychart.setOption(option)
</script>
</html>